<template>
  <view>
    <view>
      <gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></gesture-lock>
    </view>
    <view class="uni-text">{{ text }}</view>
  </view>
</template>

<script>
import GestureLock from '@/components/gesture_lock';

export default {
  components: {
    GestureLock
  },
  data() {
    return {
      password: [],
      text: '请绘制手势密码',
      id: '',
      index: 0
    }
  },
  onLoad(option) {
    this.index = option.index;
    uni.$emit("signNotify",{index:this.index,status:null});
    this.password = option.password.split(",").map(((value) => {
      return Number.parseInt(value);
    }));
    this.id = option.id;
    //禁用页面下滑功能，不然滑动会带动页面
    // #ifdef H5
    document.body.addEventListener('touchmove', bodyScroll, {
      passive: false
    });
    function bodyScroll(event) {
      event.preventDefault();
    }
    // #endif
  },
  methods: {
    onEnd(data) {
      if(this.password.length){
        if (this.password.join() === data.join()) {
          this.text = '手势密码正确';
          // 发送签到信息给后端
          let data = {
            signUserId: this.$store.getters.id,
            signTaskId: this.id
          }
          this.$u.api.saveSignIn(data).then(res => {
            if (res.code === 200) {
              uni.$emit("signNotify",{index:this.index,status:1});
              this.$u.toast('签到成功');
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/notify/notify',
                  fail: () => {
                    this.$u.toast('跳转页面失败！');
                  }
                })
              },1000)
            }else {
              this.$u.toast('签到失败！')
            }
          })
        } else {
          this.text = '手势不正确';
        }
      }
    }
  }
}
</script>

<style>
.uni-text{
  font-size: 30upx;
  text-align: center;
  margin-top: 30upx;
}
</style>
